<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/vc.css"/>
</head>
<body>
    <main class="warp float">
        <section class="left">
            <article class="top_content border float">
                <div class="right  vc">
                    <div class="student"></div>
                </div>
                <div class="right top_check">
                    <ul class="right vcList">
                        <li>
                            <div class="miniVc">
                                <div class="admin"></div>
                            </div>
                            <div class="miniVc">
                                <div class="teacher"></div>
                            </div>
                        </li>
                        <li>
                            <div class="miniVc"></div>
                            <div class="miniVc"></div>
                        </li>
                        <li>
                            <div class="miniVc"></div>
                            <div class="miniVc"></div>
                        </li>
                        <li>
                            <div class="miniVc"></div>
                            <div class="miniVc"></div>
                        </li>
                        <li>
                            <div class="miniVc"></div>
                            <div class="miniVc"></div>
                        </li>
                    </ul>
                </div>
            </article>
            <!-- 开始上课时-->
            <article class="middle_content  float" id="midBox">
                <div class="handleBar border left">
                    <ul>
                        <li>
                            <span class="iconReplace"></span>
                            <span>Replace</span>
                        </li>
                        <li>
                            <span class="iconRepload"></span>
                            <span>Repload</span>
                        </li>
                        <li>
                            <span class="iconSetting"></span>
                            <span>Setting</span>
                        </li>
                        <li>
                            <span class="iconLate"></span>
                            <span>Late</span>
                        </li>
                    </ul>
                    <div class="endClass">
                        <div class="word">End</div>
                        <div class="endUl">
                            <span>Absent</span>
                            <span>Complete</span>
                        </div>
                    </div>
                </div>
                <div class="materialBox border left">
                    <button class="handleBtn"><i class="up">&nbsp;</i></button>
                    <ul class="materialList ">
                        <li class="active">
                            <img src="" alt=""/>
                            <p class="page_size">1</p>
                        </li>
                        <li>
                            <img src="" alt=""/>
                            <p class="page_size">1</p>
                        </li>
                        <li>
                            <img src="" alt=""/>
                            <p class="page_size">1</p>
                        </li>
                    </ul>
                    <button class="handleBtn down"><i class="down">&nbsp;</i></button>
                </div>
                <div class="materialContent  right">
                    <p class="time">
                        <span><i class="icon_time"></i>19：30</span>
                        <span class="right">01/20</span>
                    </p>
                    <div class="materialPanel border"></div>
                    <div class="materialHandle border">
                        <button class="prve_page"><i>&nbsp;</i></button>
                        <ul class="list_group tool">
                            <li>
                                <span class="my_icon pen"></span>
                                <span>Pen</span>
                            </li>
                            <li>
                                <span class="my_icon square"></span>
                                <span>Square</span>
                            </li>
                            <li>
                                <span class="my_icon line"></span>
                                <span>Line</span>
                            </li>
                            <li>
                                <span class="my_icon eraser"></span>
                                <span>Eraser</span>
                            </li>
                        </ul>
                        <button class="next_page"><i>&nbsp;</i></button>
                    </div>
                </div>
                <!-- 点击开始上课-->
                <div class="startClass">
                    <p>未点击开始上课时，视频及音频不会与学生连通</p>
                    <button class="btn start">开始上课</button>
                </div>
            </article>
            <!-- 还没有开始上课时-->
            <article class="setting none" id="seting">
                <div class="set  ">
                    <div class="cont float">
                        <div class="set_left left">
                            <p><i class="iconSetting inline-block"></i>视频及音频设置</p>
                            <p><i class="iconReplace inline-block"></i>上节课教材：ajshjkasbj</p>
                        </div>
                        <div class="set_right right">
                            <button class="btn">setting</button>
                        </div>
                    </div>
                </div>
                <div class="set">
                   <div class="cont float">
                       <div class="set_left left">
                           <p>
                               <i class="iconReplace inline-block"></i>本节课教材：
                            <span class="textbook inline-block">
                                <strong class="book">XGN_34235235</strong>
                                <strong class="book">XGN_34235235</strong>
                                <strong class="book">XGN_34235235</strong>
                            </span>
                           </p>
                           <p><i class="iconReplace inline-block"></i>本节课课程备注信息：</p>
                           <div class="msgTxt">
                               <p>1 安沙师弟啊实打实按时接电话就卡死不带就说不定就卡巴圣诞节安沙师弟啊实打实按时接电话就卡死不带就说不定就卡巴圣诞节卡上卡上</p>
                               <p>2 安沙师弟啊实打实按时接电话就卡死不带就说不定就卡巴圣诞节安沙师弟啊实打实按时接电话就卡死不带就说不定就卡巴圣诞节卡上卡上</p>
                               <p>3 安沙师弟啊实巴圣诞节安沙师弟啊实打实按时接电话就卡死不带就说不定就卡巴圣诞节卡上卡上</p>
                           </div>
                       </div>
                       <div class="set_right right">
                           <button class="btn">use</button>
                       </div>
                   </div>
                </div>
                <div class="set">
                    <div class="cont float">
                        <div class="set_left left">
                            <p>
                                <span style="letter-spacing: 3px"><i class="iconReplace inline-block"></i>指定教材：</span>
                                <span class="textbook inline-block">
                                    <strong class="book">XGN_34235235</strong>
                                    <strong class="book">XGN_34235235</strong>
                                    <strong class="book">XGN_34235235</strong>
                                </span>
                            </p>
                            <button class="upload_materials btn">Upload teaching materials</button>
                        </div>
                        <div class="set_right right">
                            <button class="btn">use</button>
                        </div>
                    </div>
                </div>
            </article>
        </section>
        <aside class="right">
            <div class="info border">
                <p>12:19:30</p>
                <p>lesson period:12:00~12:25</p>
                <p>ID:12312312</p>
                <button>Return wait<i class="go"></i></button>
            </div>
            <!-- 聊天部分-->
            <div class="left chat" id="chatContent">
                <div class="chat-box">
                    <div class="chat-content box-sizing">
                        <div class="item item-you">
                            <img class="img j-img" src="images/default-icon.png" data-account="p_29976036628581026">

                            <div class="msg msg-text j-msg">
                                <span class="nickName">teacher</span>
                                <div class="box">
                                    <div class="cnt">
                                        <div class="f-maxWid">Hello&nbsp;world！Hello&nbsp;云信开发者。我是你在云信Demo上的第一个好友。如果还没添加其他好友进行消息收发测试，那就发给我试试吧！</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="u-msgTime"><span>11:00</span></p>
                        <div  class="item item-me">
                            <img class="img j-img" src="images/default-icon.png" data-account="zhouxr">
                            <div class="msg msg-text j-msg">
                                <span class="nickName">Jack</span>
                                <div class="box">
                                    <div class="cnt">
                                        <div class="f-maxWid">Hello&nbsp;world！Hello&nbsp;云信开发者。我是你在云信Demo上的第一个好友。如果还没添加其他好友进行消息收发测试，那就发给我试试吧！</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="u-msgTime"><span>11:00</span></p>
                </div>
                </div>
                <div class="sendMsg">
                    <textarea class="enterMsg" placeholder=" Tpye message here"></textarea>
                    <div class="sendHandle float">
                        <button class="expression left"></button>
                        <button class="sendBtn">Send</button>
                    </div>
                </div>
            </div>
        </aside>
    </main>
    <!-- 课程结束后的modal-->
    <div class="modal none">
        <div class="content">
            <p>标记本节课状态为：<span>已完成</span></p>
            <div class="btnGroup">
                <button class="cancel">取消</button>
                <button class="btn sure">确认</button>
            </div>
        </div>
    </div>
<script src="jquery.js"></script>
<script>
    (function(){
        var ele = $('.materialPanel');
        var box = $('#midBox');
        var set = $('#seting');
        var chatContent = $('#chatContent');
        var materialContent = $('.materialContent');
        var width = ele.width();
             ele.height(width * 3/4);
        box.height(materialContent.height());
        chatContent.height(materialContent.height());

        if (box.hasClass('none')){
            chatContent.height(set.height());
            $(window).on('resize', function(){
                chatContent.height(set.height());
            })
        } else {
            $(window).on('resize', function(){
                var width = ele.width();
                ele.height(width * 3/4);
                box.height(materialContent.height());
                chatContent.height(materialContent.height());
            })
        }
// modal
        $('.cancel').click(function(){
            $('.modal').removeClass('none');
        });
        $('.sure').click(function(){
            $('.modal').removeClass('none');
        })

    })($)
</script>
</body>
</html>